<style scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

  .el-checkbox + .el-checkbox {
    margin-left: 15px
  }

</style>

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="模板设置" name="first">
        <el-row :gutter="30">
          <el-col :span="24">
            <div style="margin-top:10px">
              <el-button icon="el-icon-plus" type="primary" size="mini" @click="addData">新增</el-button>
              <el-button icon="el-icon-close" type="danger" size="mini" @click="deleteAny">删除</el-button>
            </div>
            <div class="query-form">
              <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
                <el-form-item label="模板编码" label-width="70px">
                  <el-input v-model="tableSearchParam.code" style="width:200px" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="模板名称" label-width="90px">
                  <el-input v-model="tableSearchParam.name" style="width:200px" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <br/>
            <el-table
              :data="tableData"
              border
              empty-text="暂无数据"
              style="width: 100%"
              @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="35">
              </el-table-column>
              <el-table-column
                label="模板编码"
                property="code"
                width="200">
              </el-table-column>
              <el-table-column
                label="模板名称"
                property="name"
                width="150">
              </el-table-column>
              <el-table-column
                property="createdTime"
                label="创建时间">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    icon="el-icon-edit"
                    type="success"
                    @click="editData(scope.$index, scope.row)">编辑
                  </el-button>
                  <el-button
                    size="mini"
                    icon="el-icon-lemone-shuxing"
                    @click="editFormProperties(scope.$index, scope.row)">模板设置
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-close"
                    @click="handleDelete(scope.$index, scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="page">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page=this.currentPage
                :page-sizes="[10, 20, 30, 40]"
                :page-size=this.pageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total=this.total>
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="组设置" name="second">
        <el-row :gutter="30">
          <el-col :span="24">
            <div style="margin-top:10px">
              <el-button icon="el-icon-plus" type="primary" size="mini" @click="addGroupData">新增</el-button>
              <el-button icon="el-icon-close" type="danger" size="mini" @click="deleteGroupAny">删除</el-button>
            </div>
            <div class="query-form">
              <el-form ref="groupTableSearchParam" :model="groupTableSearchParam" label-width="50px" :inline="true">
                <el-form-item label="组编码" label-width="70px">
                  <el-input v-model="groupTableSearchParam.code" style="width:200px" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="组名称" label-width="90px">
                  <el-input v-model="groupTableSearchParam.name" style="width:200px" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="listGroupTableData" icon="el-icon-search" size="small">查询
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
            <br/>
            <el-table
              :data="groupTableData"
              border
              empty-text="暂无数据"
              style="width: 100%"
              @selection-change="handleGroupSelectionChange">
              <el-table-column
                type="selection"
                width="35">
              </el-table-column>
              <el-table-column
                label="组编码"
                property="code"
                width="200">
              </el-table-column>
              <el-table-column
                label="组名称"
                property="name"
                width="150">
              </el-table-column>
              <el-table-column
                property="createdTime"
                label="创建时间">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    icon="el-icon-edit"
                    type="success"
                    @click="editGroupData(scope.$index, scope.row)">编辑
                  </el-button>
                  <el-button
                    size="mini"
                    icon="el-icon-lemone-shuxing"
                    @click="editGroupProperties(scope.$index, scope.row)">组设置
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-close"
                    @click="handleGroupDelete(scope.$index, scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="page">
              <el-pagination
                @size-change="handleGroupSizeChange"
                @current-change="handleGroupCurrentChange"
                :current-page=this.groupCurrentPage
                :page-sizes="[10, 20, 30, 40]"
                :page-size=this.groupPageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total=this.groupTotal>
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :title="actionType=='add'?'新增模板':'修改模板'" :visible.sync="dialogFormVisible" top="10vh">
      <el-form :model="formData" style="width:400px" :rules="rules" ref="ruleForm">
        <el-form-item label="模板编码" :label-width="formLabelWidth" prop="code">
          <el-input v-model="formData.code" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="模板名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="formData.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="模板描述" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="formData.description" auto-complete="off" :rows="6"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd" v-if="actionType=='add'" :loading="loading">保存</el-button>
        <el-button type="primary" @click="handleEdit" v-else :loading="loading">修改</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="groupActionType=='add'?'新增组':'修改组'" :visible.sync="dialogGroupFormVisible" top="10vh">
      <el-form :model="groupFormData" style="width:400px" :rules="groupRules" ref="groupRuleForm">
        <el-form-item label="组编码" :label-width="formLabelWidth" prop="code">
          <el-input v-model="groupFormData.code" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="组名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="groupFormData.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="组描述" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="groupFormData.description" auto-complete="off" :rows="6"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogGroupFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleGroupAdd" v-if="groupActionType=='add'" :loading="loading">保存
        </el-button>
        <el-button type="primary" @click="handleGroupEdit" v-else :loading="loading">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import formTemplateApi from '@/api/formTemplateApi'
  import formGroupApi from '@/api/formGroupApi'

  export default {
    created() {
      this.initData()
    },
    data() {
      return {
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableSearchParam: {
          code: '',
          name: ''
        },
        dialogFormVisible: false,
        formLabelWidth: '80px',
        formData: {
          code: '',
          name: '',
          description: ''
        },
        loading: false,
        actionType: '',
        multipleSelection: [],
        rules: {
          code: [
            {required: true, message: '请输入模板编码', trigger: 'blur'},
            {max: 50, message: '长度不超过50 个字符', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入模板名称', trigger: 'blur'},
            {max: 50, message: '长度不超过50 个字符', trigger: 'blur'}
          ]
        },
        activeName: 'first',
        groupMultipleSelection: [],
        groupLoading: false,
        groupTableData: [],
        groupCurrentPage: 1,
        groupPageSize: 10,
        groupTotal: 0,
        groupTableSearchParam: {
          code: '',
          name: ''
        },
        dialogGroupFormVisible: false,
        groupFormData: {
          code: '',
          name: '',
          description: ''
        },
        groupActionType: '',
        groupRules: {
          code: [
            {required: true, message: '请输入组编码', trigger: 'blur'},
            {max: 50, message: '长度不超过50 个字符', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入组名称', trigger: 'blur'},
            {max: 50, message: '长度不超过50 个字符', trigger: 'blur'}
          ]
        },
      }
    },
    methods: {
      initData() {
        this.listTableData()
      },
      listTableData() {
        formTemplateApi.listFormTemplate(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.tableData = res.list
          this.total = res.total
        }, () => {
        })
      },
      addData() {
        //清空历史值
        this.formData = {
          code: '',
          name: '',
          description: ''

        }
        this.actionType = 'add'
        this.dialogFormVisible = true
        this.$refs['ruleForm'].resetFields()
      },
      handleAdd() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            formTemplateApi.addFormTemplate(this.formData, (res) => {
              this.loading = false
              this.dialogFormVisible = false
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.initData()
            }, () => {
              this.loading = false
            })
          }
        })
      },
      editData(index, row) {
        //清空历史值
        this.formData = {
          code: '',
          name: '',
          description: ''

        }
        let that = this
        that.actionType = 'edit'
        this.loading = true
        formTemplateApi.getFormTemplate(row.id, (res1) => {
          that.formData = res1
          that.formData.id = row.id
          this.loading = false
          that.dialogFormVisible = true
        }, () => {

        })
      },
      handleEdit() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            formTemplateApi.updateFormTemplate(this.formData.id, this.formData, (res) => {
              this.loading = false
              this.dialogFormVisible = false
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.initData()
            }, () => {
              this.loading = false
            })
          }
        })

      },
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          formTemplateApi.deleteSingleFormTemplate(row.id, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (var ms of val) {
          this.multipleSelection.push(ms.id)
        }
      },
      deleteAny() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return;
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          formTemplateApi.removeFormTemplate(this.multipleSelection, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      editFormProperties(index, row) {
        this.$router.push({path: '/form/template/detail?id=' + row.id})
      },

      handleTabClick(value) {
        if (value.index == 0) {
          this.listTableData()
        } else if (value.index == 1) {
          this.listGroupTableData()
        }
      },

      listGroupTableData() {
        formGroupApi.listFormGroup(this.groupTableSearchParam, this.groupCurrentPage, this.groupPageSize, (res) => {
          this.groupTableData = res.list
          this.groupTotal = res.total
        }, () => {
        })
      },
      addGroupData() {
        //清空历史值
        this.groupFormData = {
          code: '',
          name: '',
          description: ''

        }
        this.groupActionType = 'add'
        this.dialogGroupFormVisible = true
        this.$refs['groupRuleForm'].resetFields()
      },
      handleGroupAdd() {
        this.$refs['groupRuleForm'].validate((valid) => {
          if (valid) {
            this.groupLoading = true
            formGroupApi.addFormGroup(this.groupFormData, (res) => {
              this.groupLoading = false
              this.dialogGroupFormVisible = false
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.listGroupTableData()
            }, () => {
            })
          }
        })
      },
      editGroupData(index, row) {
        //清空历史值
        this.groupFormData = {
          code: '',
          name: '',
          description: ''

        }
        let that = this
        that.groupActionType = 'edit'
        this.groupLoading = true
        formGroupApi.getFormGroup(row.id, (res1) => {
          that.groupFormData = res1
          that.groupFormData.id = row.id
          this.groupLoading = false
          that.dialogGroupFormVisible = true
        }, () => {
        })
      },
      handleGroupEdit() {
        this.$refs['groupRuleForm'].validate((valid) => {
          if (valid) {
            this.groupLoading = true
            formGroupApi.updateFormGroup(this.groupFormData.id, this.groupFormData, (res) => {
              this.groupLoading = false
              this.dialogGroupFormVisible = false
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.listGroupTableData()
            }, () => {
              this.groupLoading = false
            })
          }
        })

      },
      handleGroupDelete(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          formGroupApi.deleteSingleFormGroup(row.id, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.listGroupTableData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleGroupSizeChange(val) {
        this.groupPageSize = val
        this.listGroupTableData()
      },
      handleGroupCurrentChange(val) {
        this.groupCurrentPage = val
        this.listGroupTableData()
      },
      handleGroupSelectionChange(val) {
        this.groupMultipleSelection = []
        for (var ms of val) {
          this.groupMultipleSelection.push(ms.id)
        }
      },
      deleteGroupAny() {
        if (this.groupMultipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return;
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          formGroupApi.removeFormGroup(this.groupMultipleSelection, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.listGroupTableData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      editGroupProperties(index, row) {
        this.$router.push({path: '/form/group/detail?id=' + row.id})
      },
    }
  }
</script>

